<template>
  <div id="app">
    <!--过渡页-->
    <div class="transition-bg-container" v-if="isShowTransitionPage">
      <div class="skip-container" @click="skipTransition">
        <div class="bg"></div>
        <div class="text-container">
          <span class="skip">跳过</span>
          <span class="time">{{ transitionPageTime }}s</span>
        </div>
      </div>
    </div>
    <div class="main-container" v-else>
      <!-- 页面路由 -->
      <router-view/>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'

export default {
  name: 'App',
  components: {},
  computed: {
    ...mapGetters({
      isShowTransitionPage: 'app/isShowTransitionPage',
    }),
  },
  data() {
    return {
      timer: null,
      transitionPageTime: 3,
    }
  },
  created() {
    // alert(this.$route.query.corpid);
    this.startTransition()
    this.getPermission()
  },
  methods: {
    getPermission() {
      this.$store.dispatch('app/getPermission')
    },
    startTransition() {
      this.timer = setInterval(() => {
        if (this.transitionPageTime <= 1) {
          this.updateIsShowTransitionPage(false)
          this.timer = null
        }
        this.transitionPageTime--
      }, 1000)
    },
    skipTransition() {
      this.updateIsShowTransitionPage(false)
      this.timer = null
    },
    ...mapActions({
      updateIsShowTransitionPage: "app/updateIsShowTransitionPage",
    })
  },
}
</script>

<style lang="scss">
body, html {
  width: 100%;
  height: 100%;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

  .transition-bg-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: url("~@/assets/transition-bg.png") no-repeat;
    background-size: 100% auto;
    background-position: center;

    animation: bg-container-animation 3s;
    -moz-animation: bg-container-animation 3s; /* Firefox */
    -webkit-animation: bg-container-animation 3s; /* Safari and Chrome */
    -o-animation: bg-container-animation 3s; /* Opera */

    @keyframes bg-container-animation {
      from {
        background-size: 0 auto;
      }
      to {
        background-size: 100% auto;
      }
    }

    @-moz-keyframes bg-container-animation /* Firefox */
    {
      from {
        background-size: 0 auto;
      }
      to {
        background-size: 100% auto;
      }
    }

    @-webkit-keyframes bg-container-animation /* Safari and Chrome */
    {
      from {
        background-size: 0 auto;
      }
      to {
        background-size: 100% auto;
      }
    }

    @-o-keyframes bg-container-animation /* Opera */
    {
      from {
        background-size: 0 auto;
      }
      to {
        background-size: 100% auto;
      }
    }

    .img {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .skip-container {
      position: absolute;
      top: 48px;
      right: 19px;
      width: 73px;
      height: 24px;

      .bg {
        width: 100%;
        height: 100%;
        opacity: 0.5;
        background: #000000;
        border-radius: 12px;
      }

      .text-container {
        position: absolute;
        top: 2px;
        left: 12px;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: justify;

        .time {
          margin-left: 5px;
        }

      }
    }
  }

  .main-container {
    height: 100%;
    width: 100%;
  }

}
</style>
